<template>
  <el-dialog :visible.sync="dialogVisible"
             @close="handleCancel"
             :title="dialogTitle">
    <!-- 对话框内容 -->
    <el-input placeholder="请搜索用户"
              style="width:80%;"
              @change="SearchUsers"
              v-model="content">
      <i slot="prefix"
         class="el-input__icon el-icon-search"></i>
    </el-input>
    <el-table :data="userList"
              border
              max-height="80%"
              :default-sort="{prop: 'date', order: 'descending'}"
              style="width: 100%;margin-top:20px">
      <el-table-column label="创建日期"
                       sortable
                       width="180">
        <template slot-scope="scope">
          <svg-icon icon-class="date"></svg-icon>
          <span style="margin-left: 10px">{{ scope.row.create_time|formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名"
                       width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip effect="dark"
                      v-if="!scope.row.status"
                      content="添加至名单"
                      placement="top">
            <el-button size="mini"
                       round
                       type="success"
                       icon="el-icon-check"
                       @click="AddPaidListById(scope.$index, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip effect="dark"
                      v-else
                      content="移除名单"
                      placement="top">
            <el-button size="mini"
                       round
                       type="warning"
                       icon="el-icon-close"
                       @click="WithdrawPaidListById(scope.$index, scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination small
                   :page-size="limit"
                   @current-change="pageChange"
                   layout="prev, pager, next"
                   :total="count">
    </el-pagination>
  </el-dialog>
</template>

<script>
export default {
  components: {
  },
  props: {
    dialogTitle: {
      type: String, // 对话框标题
      default: '编辑'
    },
    visible: {
      type: Boolean,
      required: true
    },
    musicScoreId: {
      type: Number,
    }
  },
  data () {
    return {
      dialogVisible: false,
      departmentId: null,
      music_score_id: null,
      limit: 5,
      page: 1,
      count: 0,
      // 用户名单
      userList: [],
      // 搜索内容
      content: ""
    };
  },
  watch: {
    // 数据替换
    visible: {
      immediate: true,
      handler (val) {
        this.dialogVisible = val
        // // 获取用户列表
        if (val) {
          // 初始化数据
          this.page = 1
          this.getUserList()
        }
      }
    },
    musicScoreId: {
      handler (val) {
        this.music_score_id = val
      }
    }
  },
  methods: {
    // 搜索用户
    async SearchUsers () {
      this.page = 1
      const { content, page, limit } = this
      console.log(content, page, limit)
      // 如果不存在搜索内容就获取全部
      if (!this.content) return this.getUserList()
      const res = await this.$API.user.SearchUsers(content, limit, page)
      // 如果不存在用户就显示空
      if (!res.data) this.userList = []
      console.log(res)
      if (res.status == 200) {
        // 检查用户的付费状态
        res.data.payload.forEach(user => {
          this.ReviewUserMusicScorePaidStatus(user)
        })
        this.userList = res.data.payload
        this.count = res.data.count
      }
    },
    // 查看该用户的付费状态
    async ReviewUserMusicScorePaidStatus (user) {
      const res = await this.$API.pay.ReviewUserMusicScorePaidStatus(user.id, this.musicScoreId)
      if (res.status == 200) {
        // 设置数据
        this.$set(user, 'status', res.data ? true : false)
      }
    },
    // 获取已支付用户名单
    async getUserList () {
      const { limit, page } = this
      const res = await this.$API.user.getUserList(limit, page)
      if (res.status == 200) {
        // 检查用户的付费状态
        res.data.payload.forEach(user => {
          this.ReviewUserMusicScorePaidStatus(user)
        })
        this.userList = res.data.payload
        this.count = res.data.count
      }
    },
    // 将用户添加到支付名单
    async AddPaidListById (index, user) {
      // 整理数据
      const datas = new FormData()
      datas.append("user_id", user.id)
      datas.append("music_score_id", this.music_score_id)
      const res = await this.$API.pay.AddMusicScorePaidListByUserId(datas)
      if (res.status == 200) {
        this.$message.success("添加成功")
        // 重新获取用户列表
      } else {
        this.$message.error("添加失败")
      }
      this.getUserList()

    },
    // 将用户移除名单
    async WithdrawPaidListById (index, user) {
      // 整理数据
      const datas = new FormData()
      datas.append("user_id", user.id)
      datas.append("music_score_id", this.music_score_id)
      const res = await this.$API.pay.WithDrawMusicScorePaidListByUserId(datas)
      if (res.status == 200) {
        this.$message.success("添加成功")
      } else {
        this.$message.error("添加失败")
      }
      // 重新获取用户列表
      this.getUserList()

    },
    // 页数变化
    pageChange (page) {
      this.page = page
      this.getUserList()
    },
    // 关闭事件回调
    handleCancel () {

      this.dialogVisible = false;
      this.departmentId = null

      this.$emit("custom-close")
    },
    handleConfirm () {
      // 自定义确定按钮的事件逻辑
      // 在此处编写您希望在确定按钮上触发的逻辑代码
      // 可以根据需要传递参数或调用其他方法
      // 示例：触发一个自定义事件，并传递表单数据对象
      this.$emit('custom-confirm', this.formData);

      // 关闭对话框
      this.dialogVisible = false;
    },
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
